<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta content="width=device-width,initial-scale=1" name="viewport">
    <link rel="stylesheet" href="style.css">
    <script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row clearfix">
    <div class="col12">
        <p>采用font-size:16px像素字体，行距line-height:22px像素。字体font-family:Verdana,Arial,Helvetica,sans-serif, body背景background:white;</p>
    </div>

    <div class="col12">
        <strong>这是一段加粗的文字</strong><u>这是一段下划线的文字</u><em>这是一段斜体的文字</em><del>这是一段删除线文字</del>
        <p>上标的文字在文字位于右上方显示<sup>这是一段上标文字</sup></p>
        <p>下标的文字在文字位于右下方显示<sub>这是一段下标文字</sub></p>
        <abbr>css3</abbr>

        <ul>
            <li>无序默认黑原点</li>
            <li>ul</li>
        </ul>
        <ol>
            <li>有序ol</li>
            <li>有序ol</li>
        </ol>
        <ul class="unstyled">
            <li>无样式unstyled</li>
            <li>无样式unstyled</li>

        </ul>

        <ul class="circle">
            <li>空芯圆圈circle</li>
            <li>空芯圆圈circle</li>
        </ul>
        <ul class="square">
            <li>正方形square</li>
            <li>正方形square</li>
        </ul>
        <pre>body{ background:white;}代码pre</pre>

        <table class="table table-border table-bm">
            <tbody>
            <tr>
                <td>李白</td>
                <td>兰陵王</td>
                <td>阿珂</td>
            </tr>
            <tr>
                <td>后裔</td>
                <td>鲁班</td>
                <td>伽罗</td>
            </tr>
            <tr>
                <td>陈咬金</td>
                <td>夏侯惇</td>
                <td>东皇太一</td>
            </tr>
            <tr>
                <td>庄周</td>
                <td>大乔</td>
                <td>鬼谷子</td>
            </tr>
            </tbody>
        </table>


    </div>
</div>

    <form action="" method="get" enctype="multipart/form-data" class="form form-h">
        <div class="row clearfix">
            <label class="form-label col2">姓名</label>
            <div class="form-c col10"><input name="" class="input-text" type="text" placeholder="姓名"></div>
        </div>
        <div class="row clearfix">
            <label class="form-label col2">密码框</label>
            <div class="form-c col10">
                <input type="password" class="input-text" autocomplete="off" placeholder="密码">
            </div>
        </div>
        <div class="row clearfix">
            <label class="form-label col2">单选</label>
            <div class="form-c col10">
                <div class="radio-box">

                    <label><input type="radio" name="radio"> 男</label>
                </div>
                <div class="radio-box">

                    <label><input type="radio" name="radio">女</label>
                </div>
            </div>
        </div>
        <div class="row clearfix">
            <label class="form-label col2">复选</label>
            <div class="form-c col10">
                <div class="check-box">

                    <label><input type="checkbox" name="chk"> 中国</label>
                </div>
                <div class="check-box">

                    <label><input type="checkbox" name="chk">美国</label>
                </div>
            </div>
        </div>
        <div class="row clearfix">
            <label class="form-label col2">文件域</label>
            <div class="form-c col10">
                <input type="file" multiple="" name="file" class="input-file">
            </div>
        </div>
        <div class="row clearfix">
            <label class="form-label col2">下拉</label>
            <div class="form-c col10">
                <span class="select-box">
							<select class="select" size="1" name="select">
								<option value="" selected="">默认select</option>
								<option value="1">菜单一</option>
								<option value="2">菜单二</option>
								<option value="3">菜单三</option>
							</select>
							</span>
            </div>
        </div>
        <div class="row clearfix">
            <label class="form-label col2">文本域</label>
            <div class="form-c col10">
                <textarea class="textarea" placeholder="说点什么..." rows="" cols="" name=""></textarea>
            </div>
        </div>
    </form>
    <div class="row clearfix">
        <div class="col12">
          <a class="btn">默认btn</a>
            <a class="btn btn-blue">蓝色btn-blue</a>
            <a class="btn btn-green">绿色btn-green</a>
            <a class="btn btn-red">红色btn-red</a>
            <br/>
            <a class="btn btn-red btn-block">通栏btn-block</a>
            <img src="" class="img-resp">

            <div class="btn-group">
                <span class="btn btn-blue">左边按钮</span>
                <span class="btn btn-red">中间按钮</span>
                <span class="btn btn-green">右边按钮</span>
            </div>

        </div>
    </div>

    <div id="tab_demo">
        <div class="tabbar clearfix">
            <span>选项卡一</span>
            <span>选项卡二</span>
            <span>自适应宽度</span>
        </div>
        <div class="tabcon">内容一</div>
        <div class="tabcon">内容二</div>
        <div class="tabcon">内容三</div>
    </div>
  <script>
      jQuery.tab =function(tabBar,tabCon,class_name,tabEvent,i){
          var $tab_menu=$(tabBar);
          // 初始化操作
          $tab_menu.removeClass(class_name);
          $(tabBar).eq(i).addClass(class_name);
          $(tabCon).hide();
          $(tabCon).eq(i).show();

          $tab_menu.bind(tabEvent,function(){
              $tab_menu.removeClass(class_name);
              $(this).addClass(class_name);
              var index=$tab_menu.index(this);
              $(tabCon).hide();
              $(tabCon).eq(index).show()})}
      $(function(){
          $.tab("#tab_demo .tabbar span","#tab_demo .tabcon","current","mousemove","0"); //支持click
      })
  </script>

    <div class="msg msg-green"><i class="close">&times;</i>成功状态提示</div>
    <div class="msg msg-red"><i class="close">&times;</i>错误状态提示</div>
    <div class="msg msg-blue"><i class="close">&times;</i>信息状态提示</div>
    <script>
        !function($) {
            $.msg = function() {
                $(".msg i").on("click",
                    function() {
                        var msg = $(this).parents(".msg");
                        msg.fadeOut("normal",
                            function() {
                                msg.remove();
                            });
                    });
            }
            $.msg();
        } (window.jQuery);
    </script>


    <div id="marquee" class="marquee">
        <div id="holder">
            <ul>
                <li>第一条数据</li>
                <li>第二条数据</li>
                <li>第三条数据</li>
            </ul>
        </div>
    </div>
    <script>
        !function($) {
            $.marquee = function(height, speed, delay) {
                var scrollT;
                var pause = false;
                var ScrollBox = document.getElementById("marquee");
                if (document.getElementById("holder").offsetHeight <= height) return;
                var _tmp = ScrollBox.innerHTML.replace('holder', 'holder2');
                ScrollBox.innerHTML += _tmp;
                ScrollBox.onmouseover = function() {
                    pause = true;
                }
                ScrollBox.onmouseout = function() {
                    pause = false;
                }
                ScrollBox.scrollTop = 0;
                var start = function() {
                    scrollT = setInterval(scrolling, speed);
                    if (!pause) ScrollBox.scrollTop += 2;
                }
                var scrolling = function() {
                    if (ScrollBox.scrollTop % height != 0) {
                        ScrollBox.scrollTop += 2;
                        if (ScrollBox.scrollTop >= ScrollBox.scrollHeight / 2) ScrollBox.scrollTop = 0;
                    } else {
                        clearInterval(scrollT);
                        setTimeout(start, delay);
                    }
                }
                setTimeout(start, delay);
            }
        } (window.jQuery);

        $.marquee(22,30,3000); /*移动高度,移动速度,间隔时间*/
    </script>

    <div class="pager">
        <a href="#">首页</a>
        <a href="#">上一页</a>
        <a href="#">1</a>
        <a href="#">2</a>
        <a class="selected">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">...</a>
        <a href="#">99</a>
        <a href="#">下一页</a>
        <a href="#">尾页</a></div>

    <div class="footer">
       版权所有 <a href="javascript:;">yoby制作</a> 2019
    </div>

    <div class="current">
        <a href="#">首页</a>
        &gt; <a href="#">分类</a> &gt; 内容</div>
</div>
</body>
</html>